<!-- 栏目设置 -->
<template>
	<view>
		<van-cell title="快捷应用" label="拖动可设置移动门户页面功能菜单及排序，至少需显示三项"/>
		<van-cell>
			<!-- 两个组之间拖动使用:onMove="onMove" ，单个组拖动使用@start="onStart" @end="onEnd" -->
			<draggable v-model="arr1"  group="site" animation="300" :onMove="onMove" >
				<transition-group>
					<!-- <div @click="change1(item)" class="divItem" v-for="item in arr1" :key="item.id">{{item.name}}
						<van-icon class="iconItem" name="minus" />
					</div> -->
					<view class="item-list" @click="change1(item,index)" v-for="(item,index) in arr1" :key="item.id">
						<u-icon :name="item.name" :color="item.color" :size="48"></u-icon>
						<!-- <image src="../../static/imgs/item-daiban.png"></image> -->
						<u-icon class="minus" name="minus-circle" color="#FF0000" size="42"></u-icon>
						<text>{{item.title}}</text>
					</view>
				</transition-group>
			</draggable>
			
		</van-cell>
		<van-cell title="所有应用" />
		<van-cell>
			<draggable v-model="arr2" group="site" animation="300" :onMove="onMove">
				<transition-group>
					<!-- <div @click="change2(item)" class="divItem" v-for="item in arr2" :key="item.id">{{item.name}}
						<van-icon class="iconItem" name="plus" />
					</div> -->
					<view class="item-list" @click="change2(item,index)" v-for="(item,index) in arr2" :key="item.id">
						<u-icon :name="item.name" :color="item.color" :size="48"></u-icon>
						<!-- <image src="../../static/imgs/item-daiban.png"></image> -->
						<u-icon class="minus" name="plus-circle" color="#3675fd" size="42"></u-icon>
						<text>{{item.title}}</text>
					</view>
				</transition-group>
			</draggable>
		</van-cell>
	</view>
</template>

<script>
	import draggable from 'vuedraggable';

	export default {
		components: {
			draggable
		},
		props: {},
		data() {
			return {
				drag: false,
				arr1: [
					{id: 1,name: 'list-dot',title: '待办',color:'#5998ff'},
					{id: 2,name: 'eye',title: '跟踪',color:'#ffbb5a'}, 
					{id: 3,name: 'search',title: '查询',color:'#5ae5ef'}, 
					{id: 4,name: 'star-fill',title: '收藏',color:'#ffaca0'}, 
					{id: 5,name: 'order',title: '新闻',color:'#d48dff'}
				],
				arr2: [
					{id: 11,name: 'list-dot',title: '待办1',color:'#5998ff'}, 
					{id: 21,name: 'eye',title: '跟踪1',color:'#ffbb5a'}, 
					{id: 31,name: 'search',title: '查询1',color:'#5ae5ef'}, 
					{id: 41,name: 'star-fill',title: '收藏1',color:'#ffaca0'}, 
					{id: 51,name: 'order',title: '新闻1',color:'#d48dff'}
				],
			}
		},
		methods: {
		    change1(item,index){
			  console.log(item);
			  this.arr2.push(item);
			  this.arr1.splice(index,1);
			},
			change2(item,index){
			  console.log(item);
			  this.arr1.push(item);
			  this.arr2.splice(index,1);
			},

			onStart() {
				this.drag = true;
			},
			//拖拽结束事件
			onEnd() {
				this.drag = false;
			},
			onMove(e,originalEvent){ 
				 return true;
			 },  
		}
	}
</script>
<style>
	.ugrid{
		margin-top: 10rpx;
		padding: 0;
	}
	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}
	.divItem {
		float: left;
		margin-left: 10rpx;
		text-align: center;
		width: 100rpx;
		height: 50rpx;
		background-color: #42b983;
		color: #ffffff;
	}
	/* item 待办、跟踪、查询... */
	
	
	 .item-list{
		 position: relative;
		float: left;
		z-index: 50;
		margin-top: 80rpx;
		width: 20%;
		text-align: center;
	}
	.item-list image{
		width: 65rpx;
		height: 65rpx;
		
	}
	.item-list text{
		display: block;
		width: 100%;
		color: #999999;
		font-size: 24rpx;
	} 
	.minus{
		position: absolute;
		top: -25px;
		right: -20px;
		width: 90rpx;
		height: 90rpx;
		z-index: 10;
	}
	 .chosen{
	    background-color: #000 !important;
	    color: #fff;
	  }
	  .ghost{
	    background-color: red !important;
	  }
</style>
